<template>
  <div class="music-bar">
    <!-- 左侧排名 -->
    <div class="musbar-l" v-show="showLeftTop" :class="{billboard:leftNum<3}">
      <slot>
        <div v-text="sort(leftNum)"></div>
      </slot>
    </div>
    <!-- 中间详细信息 -->
    <div class="musbar-c">
      <slot>
        <div class="musbar-c-l">{{musicInfo.musicName}}</div>
        <div class="musbar-c-r">
          <i class="sghot"></i>
          {{musicInfo.author}} - {{musicInfo.songs}}
        </div>
      </slot>
    </div>
    <!-- 右侧点击按钮 -->
    <div class="musbar-r">
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showLeftTop: {
      type: Boolean,
      default: false,
    },
    leftNum: {
      type: Number,
      default: 0,
    },
    // 音乐信息
    musicInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    // 对排名做显示转换
    sort(val) {
      val++;
      if (val < 11) {
        return "0" + val;
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.music-bar {
  display: flex;
  width: 100%;
  align-items: center;
  height: 55px;
}
/* 左边 */
.musbar-l {
  width: 40px;
  font-size: 17px;
  color: #999;
  height: 55px;
  line-height: 55px;
  text-align: center;
  box-sizing: border-box;
}
.billboard {
  color: #df3436;
}

/* 中间 */
.musbar-c {
  flex: 1;
  padding: 6px 0;
  height: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  box-sizing: border-box;
  border: 0 solid rgba(0, 0, 0, 0.1);
  border-bottom-width: 1px;
}
.musbar-c-l {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  color: #333;
}
.musbar-c-r {
  font-size: 12px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.sghot {
  display: inline-block;
  width: 12px;
  height: 8px;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
    no-repeat;
  background-size: 166px 97px;
}

/* 右边 */
.musbar-r {
  padding: 0 10px;
  height: 55px;
  line-height: 55px;
  box-sizing: border-box;
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-bottom-width: 1px;
}
.musbar-r span {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=")
    no-repeat;
  background-size: 166px 97px;
  background-position: -24px 0;
}
</style>